<!--
    选择组件复制之前的, 没有注释
  -->
<template>
  <div class="secondTabs">
    <div
      :class="{secondTab: true, active: isActive === index}"
      v-for="(item, index) in tabList"
      :key="item.id"
      @click="changeActive(index)"
    >{{ item.name }}
    </div>
    <choose-year></choose-year>
  </div>
</template>

<script>
  import ChooseYear from './choostTime/ChooseYear'
  import {mapGetters} from 'vuex'
  import {getChangeDate} from './choostTime/getTime'
  export default {
    name: 'SecondTab',
    components: {
      ChooseYear
    },
    data () {
      return {
        tabList: [
          {id: 1, name: '昨日'},
          {id: 2, name: '本旬'},
          {id: 3, name: '本月'},
          {id: 4, name: '本年'}
        ],
        isActive: 0
      }
    },
    computed: {
      ...mapGetters(['firstTabId', 'show', 'timeActive'])
    },
    watch: {
      firstTabId: {
        handler () {
          this.isActive = 0
        }
      },
      show: {
        handler () {
          this.isActive = ''
          this.$store.commit('SETTIMEACTIVE', '')
        }
      }
    },
    mounted () {
      this.isActive = this.timeActive
    },
    methods: {
      changeActive (index) {
        // console.log('时间筛选条件的index', index);
        this.isActive = index
        this.$store.commit('SETTIMEACTIVE', index)
        const {startData, endData} = getChangeDate(index);
        this.$store.commit('SETTIMEOBJ', { startData, endData })
      }
    }
  }
</script>

<style lang="less" scoped>
  .secondTabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .2rem 0.3rem 0.3rem;
    /*z-index: 9999;*/
    /*position: fixed;*/
    /*width: 100%;*/
    /*background: #fff;*/
    /*top: 0;*/
    /*left: 0;*/


    .secondTab {
      font-size: 0.28rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
      line-height: 0.42rem;

      &.active {
        color: #4375C9;
      }
    }

    .theTimeCon {
      display: flex;
      .range {
        line-height: 0.6rem;
        margin: 0 0.1rem;
        color: #999999;
        font-weight: 400;
        font-size: 0.30rem
      }

      .theDate {
        width: 1.8rem;
        height: 0.6rem;
        font-size: 0.26rem;
        text-align: center;
        font-weight: 400;
        line-height: 0.56rem;
        color: #666666;
        background: #f6f6f6;
        border-radius: 0.12rem;
        border: 0.01rem solid #cbcbcb;
      }
    }
  }
</style>
